

// ListView
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h4,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h6 {
   color: #FFF;
}

.listview-container.grid-layout {
   border: solid 2px rgba(0, 0, 0, 0.13);
   height: 240px;
   overflow: auto;
   padding: 2px;
   background-color: #FFF;
}


.mediumListIconTextItem .mediumListIconTextItem-Image[class^="icon-"],.mediumListIconTextItem .mediumListIconTextItem-Image[class*=" icon-"] {
   display: inline-block;
   width: 60px;
   height: 60px;
   font-size: 60px;
   line-height: 60px;
   margin: 5px;
}
.mediumListIconTextItem {
   display: inline-block;
   position: relative;
   vertical-align: top;
   width: 282px;
   height: 70px;
   padding: 5px;
   margin-bottom: 7px;
   margin-right: 24px;
   border: solid 3px transparent;
   overflow: hidden;
   background-color: #FFF;
   cursor: pointer;
   .mediumListIconTextItem-Detail {
      display: inline-block;
      vertical-align: top;
      margin: 5px;
   }
   img.mediumListIconTextItem-Image {
      display: inline-block;
      vertical-align: top;
      width: 60px;
      height: 60px;
      margin: 5px;
   }
}

.mediumListIconTextItem.selected:hover {
   border: solid 3px #b3b3b3;
   background-color: #4617b4;
}
.mediumListIconTextItem.selected {
   background-color: #4617b4;
}
.mediumListIconTextItem:hover {
   border: solid 3px #b3b3b3;
   background-color: #b3b3b3;
}

.mediumListIconTextItem.selected:after {
   position: absolute;
   top: 5px;
   right: 5px;
   width: 16px;
   height: 16px;
   font-family: 'IcoMoon';
   content: "\e03c";
   color: #FFF;
   font-size: 16px;
}



/*
Tile ListView
*/
.metro {
   .tile-listviewitem-container {
      overflow: auto;
   }

   .tile-listviewitem {
      position: relative;
      display: block;
      margin: 0 0 13px 0;
      padding: 7px 0;
      height: 113px;
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
      background-color: transparent;

      img {
         .box-sizing(border-box);
         display: inline-block;
         vertical-align: top;
         margin-left: 7px;
         height: 100%;
         width: 100%;
      }

      .detail {
         margin-left: 10px;
         margin-right: 7px;
         display: inline-block;
         vertical-align: top;
         height: 113px;
         .text-overflow-wrap;

         .title {
            font-size: 16px;
            font-weight: 400;
         }
         .subtitle {
            font-size: 10px;
            font-weight: 400;
         }
      }
   }

   .tile-listviewitem.selected {
      background-color: #4617b4;
      color: #FFF;
   }
   .tile-listviewitem:hover {
      background-color: #b3b3b3;
   }
   .tile-listviewitem.selected:hover {
      background-color: #4617b4;
   }
}


article.tile-listviewitem-detail {
   margin-left: 72px;

   header {
      img {
         display: inline-block;
         vertical-align: top;
      }
      .titles {
         display: inline-block;
         vertical-align: top;

         h1 {
            font-size: 24px;
            font-weight: 300;
         }
         h2 {
            font-size: 14px;
            font-weight: 300;
         }
      }
   }

   section {
      padding-top: 20px;
   }


}

